<%--
  Created by IntelliJ IDEA.
  User: RuoLi
  Date: 2023/1/19
  Time: 21:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加数据</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/index.css">
    <!-- import Vue before Element -->
    <script src="<%=request.getContextPath()%>/js/vue.js"></script>
    <!-- import JavaScript -->
    <script src="<%=request.getContextPath()%>/js/element-ui.js"></script>
    <!-- axios -->
    <script src="<%=request.getContextPath()%>/js/axios.js"></script>
    <%--icon--%>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.ttf">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/css/fonts/element-icons.woff">
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="添加数据"></el-page-header>
    <el-divider></el-divider>
    <el-row v-if="topicStep1">
        <el-col :span="10">
            <el-form ref="topic" :model="topic" label-width="80px">
                <el-form-item label="活动区域">
                    <el-select v-model="topic.grade" placeholder="适用年级">
                        <el-option label="七年级" value="七年级"></el-option>
                        <el-option label="八年级" value="八年级"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="题目类型">
                    <el-radio-group v-model="topic.topicType">
                        <el-radio label="选择题">选择题</el-radio>
                        <el-radio label="判断题">判定题</el-radio>
                        <el-radio label="填空题">填空题</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="章节名称">
                    <el-input v-model="topic.chapterName"></el-input>
                </el-form-item>
                <el-form-item label="知识节点">
                    <el-input v-model="topic.knowledgePoint"></el-input>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-row v-if="topicStep2">
        <el-col :span="10">
            <el-form ref="detailedTopic" :model="detailedTopic" label-width="80px">
                <el-form-item label="题目标题">
                    <el-input v-model="detailedTopic.topicTitle" show-word-limit></el-input>
                </el-form-item>
                <el-form-item label="题目选项">
                    <el-col :span="5" :offset="1">
                        <el-form-item label="A:" label-width="20">
                            <el-input show-word-limit v-model="detailedTopic.topicCheck1"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="B:" label-width="20">
                            <el-input show-word-limit v-model="detailedTopic.topicCheck2"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="C:" label-width="20">
                            <el-input show-word-limit v-model="detailedTopic.topicCheck3"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" :offset="1">
                        <el-form-item label="D:" label-width="20">
                            <el-input show-word-limit v-model="detailedTopic.topicCheck4"></el-input>
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="题目答案">
                    <el-col :span="6">
                        <el-input v-model="detailedTopic.topicAnswer" show-word-limit></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="答案解析">
                    <el-input type="textarea" show-word-limit v-model="detailedTopic.topicAnswerParse"></el-input>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <el-row v-if="topicStep3">
        <el-descriptions title="题目基本信息" border="true">
            <el-descriptions-item label="题型编号">{{topicId}}</el-descriptions-item>
            <el-descriptions-item label="年级">{{topic.grade}}</el-descriptions-item>
            <el-descriptions-item label="类型">{{topic.topicType}}</el-descriptions-item>
            <el-descriptions-item label="章节">{{topic.chapterName}}</el-descriptions-item>
            <el-descriptions-item label="知识点">{{topic.knowledgePoint}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="题目详细信息" border="true">
            <el-descriptions-item label="题目编号">{{detailedTopicId}}</el-descriptions-item>
            <el-descriptions-item label="题目标题">{{detailedTopic.topicTitle}}</el-descriptions-item>
            <el-descriptions-item label="选项1">{{detailedTopic.topicCheck1}}</el-descriptions-item>
            <el-descriptions-item label="选项2">{{detailedTopic.topicCheck1}}</el-descriptions-item>
            <el-descriptions-item label="选项3">{{detailedTopic.topicCheck1}}</el-descriptions-item>
            <el-descriptions-item label="选项4">{{detailedTopic.topicCheck1}}</el-descriptions-item>
            <el-descriptions-item label="题目答案">{{detailedTopic.topicAnswer}}</el-descriptions-item>
            <el-descriptions-item label="题目解析">{{detailedTopic.topicAnswerParse}}</el-descriptions-item>
        </el-descriptions>
    </el-row>
    <el-row>
        <el-col :span="8">
            <el-steps :active="active" finish-status="success">
                <el-step title="步骤 1"></el-step>
                <el-step title="步骤 2"></el-step>
                <el-step title="完成"></el-step>
            </el-steps>
            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
        </el-col>
    </el-row>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                topicId: '',
                detailedTopicId: '',
                active: 0,
                //题目类型判定
                topicStep1: true,
                topicStep2: false,
                topicStep3: false,
                topic: {
                    grade: '',
                    topicType: '',
                    chapterName: '',
                    knowledgePoint: '',
                },
                detailedTopic: {
                    topicTitle: '',
                    topicCheck1: '',
                    topicCheck2: '',
                    topicCheck3: '',
                    topicCheck4: '',
                    topicAnswer: '',
                    topicAnswerParse: '',
                }
            }
        },
        methods: {
            goBack() {
                window.location.href = "/online_website/admin/index_admin.jsp";
            },
            next() {
                this.active++;
                if (this.active === 1) {
                    axios({
                        url: "/online_website/common/TopicInsert",
                        method: "get",
                        contentType: "application/json",
                        params: this.topic,
                    }).then((res) => {
                        console.log(res.data)
                    });
                    //封装数据 topic
                    this.topicStep1 = false;
                    this.topicStep2 = true;
                    this.topicStep3 = false;
                } else if (this.active === 2) {
                    //封装数据 detailedTopic
                    console.log(this.active);
                    this.topicStep1 = false;
                    this.topicStep2 = false;
                    this.topicStep3 = true;
                    //发送数据
                    axios({
                        url: "/online_website/common/detailedTopicInsert",
                        method: "get",
                        contentType: "application/json",
                        params: this.detailedTopic,
                    }).then((res) => {
                        this.topicId = res.data["topicId"];
                        this.detailedTopicId=res.data["detailedTopicId"];
                    });
                } else if (this.active > 2) {
                    this.active = 0;
                    this.topicStep1 = true;
                    this.topicStep2 = false;
                    this.topicStep3 = false;
                    //清空数据
                    this.topic = '';
                    this.detailedTopic = '';
                }

            }
        }
    })
</script>
</html>
